@extends('layouts.app')

@section('content')

<script type="text/javascript">  
function preImg(sourceId, targetId) {  
    if (typeof FileReader === 'undefined') {  
        alert('Your browser does not support FileReader...');  
        return;  
    }  
    var reader = new FileReader();  
  
    reader.onload = function(e) {  
        var img = document.getElementById(targetId);  
        img.src = this.result;  
    }  
    reader.readAsDataURL(document.getElementById(sourceId).files[0]); 
} 

</script>  

<div class="container">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="panel panel-default">
                <div class="panel-heading">创建一个专题</div>
                <div class="panel-body">

                    @if (count($errors) > 0)
                        <div class="alert alert-danger">
                            <strong>新增失败</strong> 输入不符合要求<br><br>
                            {!! implode('<br>', $errors->all()) !!}
                        </div>
                    @endif

                    <form action="{{ url('category') }}" method="POST" enctype="multipart/form-data">
                        {!! csrf_field() !!}
                        <input type="hidden" name="founder" value="{{ Auth::user()->id }}">
                        <input type="text" name="category" class="form-control" required="required" placeholder="请输入标题">
                        <br>
                        设置封面 <input type="file" name="imgOne" id="imgOne" onchange="preImg(this.id,'imgPre');" />
                        <br>
                        <div>
                            <img id="imgPre" src="" style="display: block; width: 100px; height:100px; border-radius:10px;" />
                        </div>
                        <br>
                        <textarea name="intro" rows="10" class="form-control" required="required" placeholder="请输入内容"></textarea>
                        <br>
                        <button class="btn btn-lg btn-info">创建专题</button>
                    </form>

                </div>
            </div>
        </div>
    </div>
</div>
@endsection